<template>
	<view class="repair">
		<view style="width: 100%;background-color: #FFFFFF;">
			<view class="cardCon" style="background-color: #FFFFFF;">
				<view class="list-li">
					<view class="list-name">
						<text
							style="color: #000000;font-weight: 700;font-size: 18px;">{{userObj.orgName}}~{{userObj.proName}}~{{userObj.doorCode}}</text>
					</view>
				</view>
				<view>
					<view style="font-size: 18px;color: #999999;margin-top: 10px;">
						基本信息
					</view>
					<view class="list_text">
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								租户姓名：<text style="float: right;">{{userObj.ten_name}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								租户电话：<text style="float: right;">{{userObj.ten_number}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;margin-left: 10px;">
								性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
								<text style="float: right;">{{ userObj.ten_gender==1?"男":userObj.ten_gender==2?"女":"暂无" }}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：<text style="float: right;">{{userObj.ten_nation}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：<text style="float: right;">{{userObj.ten_occ}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								出生日期：<text style="float: right;">{{userObj.ten_birthday}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								每月租金：<text style="float: right;">{{userObj.ten_rent}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								付款方式：<text style="float: right;">
									{{userObj.ten_card==1?'月付':
											userObj.ten_card==2?'押一付一':
											userObj.ten_card==3?'季付':
											userObj.ten_card==4?'押一付三':
											userObj.ten_card==5?'年付':
											userObj.ten_card==6?'押一付六':'押一付十二'}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								押&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金：<text style="float: right;">{{userObj.ten_deposit}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								合同周期：<text
									style="float: right;">{{userObj.ten_contract_begin}}~{{userObj.ten_contract_end}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								身&nbsp;&nbsp;份&nbsp;证：<text style="float: right;">{{userObj.ten_card}}</text>
							</text>
						</view>
            <view style="margin-top: 10px;">
              <text style="color: #999999;font-size: 16px;margin-left: 10px;" >租户身份证</text>
              <view class="list_text_name">
                <img @click="imgyl(0,userObj.ten_card_posi.split(','))" v-if="userObj.ten_card_posi"
                     :src="userObj.ten_card_posi" style="width: 40%;height: 80%;"></img>
                <img @click="imgyl(0,userObj.ten_card_side.split(','))" v-if="userObj.ten_card_side"
                     :src="userObj.ten_card_side" style="width: 40%;height: 80%;margin-left: 15px;"></img>
              </view>
            </view>

						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								水电支付方式：<text style="float: right;">{{userObj.ten_hyd_pay==1?'水电卡':'水电表'}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：<text style="float: right;">{{userObj.ten_water_number}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：<text style="float: right;">{{userObj.ten_meters_number}}</text>
							</text>
						</view>
						<view class="list_text_name">
							<text style="font-size: 16px;  margin-left: 10px;">
								天然&nbsp;气&nbsp;表&nbsp;数：<text style="float: right;">{{userObj.ten_natural_number}}</text>
							</text>
						</view>

            <view style="margin-top: 10px;">
              <text style="color: #999999;font-size: 16px; margin-left: 10px;">租赁合同</text>
              <view class="list_text_name">
                <img @click="imgyl(indexs,userObj.ten_lease_contract.split(','))"
                     v-if="userObj.ten_lease_contract"
                     v-for="(items,indexs) in userObj.ten_lease_contract.split(',')" :src="items"
                     :style="indexs==1||indexs==3||indexs==5||indexs==7?'width: 40%;height: 40%;margin-left:15px;margin-top:10px':'width: 40%;height: 40%;;margin-top:10px'"></img>
              </view>
            </view>

						
						<view class="line"></view>
						<view>
							
							<view class="repair-wrap">
								<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;">
									<view style="width: 100%;margin:auto;">
										<view v-for="(item,index) in operList" class="header-li"
											@click="clickHand(index)">
											<view>
												<image
													style="width: 19px;height: 21px;float: left;margin-top: 16px;margin-right: 5px;"
													:src="item.img"></image>
												<view>{{item.name}}</view>
												<image style="width: 8px;height: 10px;float: right; margin-top: -33px;"
													src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeName: '',
				loading: false,
				type: 1,
				userObj: {},
				indexTu: '0',
				imgList: [], //图片列表
				imgViewerVisible: false, //弹窗打开
				operList: [{
						name: '家人信息',
						url: '/privateMsg/rentsale/familyList',
						img: '',
					},
					{
						name: '退租信息',
						url: '/privateMsg/rentsale/outtenList',
						img: '',
					},
				]
			};
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.userObj = item
		},

		methods: {
			imgyl(index, imgList) {
				uni.previewImage({
					urls: imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index,
				})
			},
			clickHand(index) {
				let userObj = encodeURIComponent(JSON.stringify(this.userObj))
				uni.navigateTo({
					url: this.operList[index].url + '?datas=' + userObj
				})
			}
		},
	};
</script>

<style lang="scss">
	.repair {
		width: 100%;
	}
	.cardCon {
		width: 90%;
		margin: 20px auto;
		padding-bottom: 48px;
	}

	.list-li {}

	.list_text_name {
		padding-top: 10px;
	}

	.list-img {
		padding-top: 10px;
	}

	.repair-wrap {
		width: 100%;
		height: auto;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.header-li {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 105rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.line {
		background-color: gray;
		height: 3px;
		width: 100%;
		margin-top: 20px;
	}
</style>